<template>
  <div class="home">
    <div class="nva-head">
      <img class="image" src="../assets/log.png" />
      <van-search
        v-model="value"
        shape="round"
        background="#000000"
        placeholder="请输入搜索关键词"
        class="search"
      />
      <!-- <button class="search-btn">搜索</button> -->
    </div>
    <!-- 轮播图 -->
    <div class="bltt">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in lbt" :key="item.img">
          <img v-lazy="item.img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 九宫格 -->
    <van-grid>
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"
        text="超市"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1"
        text="今日爆品"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1"
        text="同物国际"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1"
        text="没饿"
      />

      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"
        text="充值"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB19dcwVyrpK1RjSZFhXXXSdXXa-183-144.png?getAvatar=1"
        text="吃货"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1"
        text="金币庄园"
      />
      <van-grid-item
        icon="https://gw.alicdn.com/tfs/TB16ZYDk4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"
        text="拍卖"
      />
    </van-grid>

    <!--  商品列表-->
    <div class="goodslist">
      <div class="item" v-for="item in goods" :key="item.id">
        <div class="imgWrap flex_c_c">
          <img v-lazy="item.img_url" alt />
        </div>
        <div class="title Text_overflow">{{ item.title }}</div>
        <div class="price">
          <span>&yen; {{ item.sell_price }}</span>
          <span>{{ item.buy }}购买</span>
        </div>
      </div>
    </div>
  </div>
</template>  

<script>
import { fetchLunbo, fetchRecommend } from "@/api/index.js";
export default {
  data() {
    return {
      value: "",
      lbt: [],
      goods: [],
    };
  },

  methods: {
    // onSearch(val) {
    //   Toast(val);
    // },
    // onCancel() {
    //   Toast("取消");
    // },
    async getLunbo() {
      let result = await this.$httpGet("http://api.w0824.com/api/getlunbo");
      console.log(result);
    },
    async _fetchLbt() {
      let { message } = await fetchLunbo();
      this.lbt = message;
    },
    async _fetchRecommend() {
      let { message } = await fetchRecommend();
      this.goods = message;
    },
  },
  created() {
    // 初始化轮播图数据
    this._fetchLbt();
    this._fetchRecommend();
  },
};
</script>

<style lang="scss" scoped>
.home {
  // 头部搜索栏
  background-color: #fff;
  .nva-head {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;
    // margin-bottom: 0px;
    background-color: rgb(25, 71, 207);
    display: flex;

    .image {
      width: 50px;
      border-right: 0;
    }
    .search {
      flex: 1;
    }
    .search-btn {
      background-color: #000000;
      color: #fff;
      border: 0px solid;
    }
    .bck {
      background-color: #004acd;
    }
  }
  // 轮播图
  .bltt {
    width: 100%;
    height: 100%;
    .my-swipe {
      .van-swipe-item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #f0eded;
    padding-top: 10px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200px;
      width: 47%;
      padding: 6px;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 4px;
      font-size: 14px;
      .imgWrap {
        height: 124px;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .Text_overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span:nth-child(1) {
          color: #ff845e;
          font-size: 16px;
          font-weight: 700;
        }

        span:nth-child(2) {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>